﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Samples </title>
    <style type="text/css">
        body
        {
            font-family:Calibri,Microsoft Sans Serif,Tahoma;
            font-size:12px;
            font-weight:normal;
            color:#202020;
            background:#2C2C2C; 
            top:0px; 
            left:0px; 
            margin:0px;
            padding-top:50px;        
        }
        div,p,h2
        {
        	text-decoration:none;
        }
        h2
        {
        	font-size:14px;
        	
        }
        .square
        {
            height:100%;
            width:45%;
            float:left;
            border-right:1px solid #000;
            margin-left:3%;
            background:#FFFFFF;
            border-bottom:1px solid #000000;
            border-top:1px solid #505050;
            border-left:1px solid #505050;
            border-right:1px solid #000000;
            margin-bottom:30px;
            cursor:pointer;
        
        }
        div.square:hover
        {
        	 border-bottom:1px solid #F00000;
            border-top:1px solid #F05050;
            border-left:1px solid #F05050;
            border-right:1px solid #F00000;
            background-color:#D8D8D8;
        }
        
        li
        {
        	 list-style-type:circle;
        	 
        }
         .thumb
         {
         	width:40%;
         	height:80%;
         	float:left;
         	margin-top:25px;
         	margin-left:25px;
         }
         
         div div.option
         {
            width: auto;
            float: right;
            height: 15px;
            margin-left: 10px;
            margin-right: 10px;
            margin-top: 1px;
            padding:2px;
            border-top:1px solid #A7A8A6;
            border-left:1px solid #A7A8A6;
            border-right:1px solid #60615E;
            border-bottom:1px solid #60615E;
            background:#CACBC8;
            cursor:pointer;
         }
         
         div div.option:hover
         {
            width: auto;
            float: right;
            height: 15px;
            margin-left: 10px;
            margin-right: 10px;
            margin-top: 1px;
            padding: 2px;
            border-top:1px solid #A7A8A6;
            border-left:1px solid #A7A8A6;
            border-right:1px solid #60615E;
            border-bottom:1px solid #60615E;
            background:#ADADAC;
            color:#C31C3C;
         }
         
    </style>
</head>

<body>
    <div style="width:80%;height:250px;margin-left:10%">
        <div class='square' onclick="javascript:window.location.href='Samples/IndustrialChart.html'"> 
            <div class='thumb' style="background:url(Samples/ImagesSamples/IndustrialChart.png) no-repeat;"></div>
            <div style="width:40%;height:80%;float:left;padding:10px;" >
                 <h2>IndustrialChart</h2>         
                <p>Displays an Industrial Chart Curves</p>
                <ul>
                <li>Customized Widget</li>
                <li>Gets data from Stored Procedure</li>
                <li>Lightweight JSON message.</li>
                </ul>       
            </div>
        </div>
        <div class='square' onclick="javascript:window.location.href='Samples/CalendarIndustrialGrid.html'"> 
            <div class='thumb' style="background:url(Samples/ImagesSamples/IndustrialGrid.png) no-repeat;"></div>
            <div style="width:40%;height:80%;float:left;padding:10px;" >
                <h2>IndustrialGrid</h2>         
                <p>Displays an Industrial Grid Report</p>
                <ul>
                <li>Gets data and struct from Stored Procedure</li>
                <li>Lightweight JSON message.</li>                
                <li>Cell based style indicate warnings.</li>                
                </ul>       
            </div>
        </div>
        <div class='square' onclick="javascript:window.location.href='Samples/IndustrialSidebarAccordionMenu.html'"> 
            <div class='thumb' style="background:url(Samples/ImagesSamples/IndustrialSidebarAccordionMenu.png) no-repeat;"></div>
            <div style="width:40%;height:80%;float:left;padding:10px;" >
                 <h2>Accordion Menu</h2>         
                <p>Displays a Sidebar Accordion Menu</p>
                <ul>
                <li>Customized Widget</li>
                <li>Gets data from Stored Procedure</li>
                <li>Up to 2 levels</li>
                </ul>       
            </div>
        </div>             
        
         <div class='square' onclick="javascript:window.location.href='Samples/DestinationPDFSample.html'">
            <div class='thumb' style="background:url(Samples/ImagesSamples/DestinationPDF.png) no-repeat;"></div>
            <div style="width:40%;height:80%;float:left;padding:10px;" >
                 <h2>Destination PDF</h2>         
                <p>Allow user to print to PDF File</p>                
            </div>
        </div> 
        
         <div class='square' onclick="javascript:window.location.href='Samples/IndustrialSlickGridSample.html'">
            <div class='thumb' style="background:url(Samples/ImagesSamples/SlickGrid.png) no-repeat;"></div>
            <div style="width:40%;height:80%;float:left;padding:10px;" >
                <h2>SlickGrid</h2>         
                <p>Displays an advanced Grid</p>
                <ul>
                <li>Uses SlickGrid widget</li>
                <li>Gets data from Stored Procedure</li>
                <li>Transform data format directly in js</li>
                </ul>       
            </div>
        </div> 
        
        <div class='square' onclick="javascript:window.location.href='Samples/CalendarPickerChart.html'">
            <div class='thumb' style='background:url(Samples/ImagesSamples/chart.png) no-repeat;'></div>
            <div style="width:40%;height:80%;float:left;background:transparent;padding:10px;" >
                <h2>Ext Chart</h2>         
                <p>Displays a basic Chart </p>
                <ul>
                <li>Uses Ext.js Chart widget</li>
                <li>Gets data from Stored Procedure</li>
                <li>Transform data format with a widgetAdapter</li>
                </ul>
            </div>
        </div> 
        
        <div class='square' onclick="javascript:window.location.href='Samples/DojoDataGrid.html'">
            <div class='thumb' style="background:url(Samples/ImagesSamples/dojoGrid.png) no-repeat;"></div>
            <div style="width:40%;height:80%;float:left;padding:10px;" >
                 <h2>Dojo Grid</h2>         
                <p>Displays a basic Grid</p>
                <ul>
                <li>Uses Dojox.DataGrid widget</li>
                <li>Gets data from Stored Procedure</li>
                <li>Transform data format directly in js</li>
                </ul>       
            </div>
        </div> 
                
   </div>    
</body>
</html>
